<!DOCTYPE html>
<html>
<head>
    <title>Electrostatics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const centerX = canvas.width / 2;
        const centerY = 200; // Shift center up a bit for the caption
        const l0 = 100;
        const chargeRadius = 4;

        // Coordinates of vertices
        const topVertex = { x: centerX, y: centerY - l0 };
        const rightVertex = { x: centerX + l0, y: centerY };
        const bottomVertex = { x: centerX, y: centerY + l0 };
        const leftVertex = { x: centerX - l0, y: centerY };
        const centerPoint = { x: centerX, y: centerY };

        // --- Drawing Functions ---

        // Function to draw a filled circle
        function drawCircle(x, y, radius, color) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = color;
            ctx.fill();
        }

        // 1. Draw the square outline (solid lines)
        ctx.beginPath();
        ctx.moveTo(topVertex.x, topVertex.y);
        ctx.lineTo(rightVertex.x, rightVertex.y);
        ctx.lineTo(bottomVertex.x, bottomVertex.y);
        ctx.lineTo(leftVertex.x, leftVertex.y);
        ctx.closePath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.stroke();

        // 2. Draw the diagonals (dashed lines)
        ctx.beginPath();
        ctx.setLineDash([6, 4]);
        ctx.moveTo(topVertex.x, topVertex.y);
        ctx.lineTo(bottomVertex.x, bottomVertex.y);
        ctx.moveTo(leftVertex.x, leftVertex.y);
        ctx.lineTo(rightVertex.x, rightVertex.y);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // 3. Draw the point charges (circles)
        drawCircle(topVertex.x, topVertex.y, chargeRadius, 'black');
        drawCircle(rightVertex.x, rightVertex.y, chargeRadius, 'black');
        drawCircle(bottomVertex.x, bottomVertex.y, chargeRadius, 'black');
        drawCircle(leftVertex.x, leftVertex.y, chargeRadius, 'black');
        drawCircle(centerPoint.x, centerPoint.y, chargeRadius, 'black');

        // 4. Add labels
        ctx.fillStyle = 'black';
        ctx.font = 'italic 22px Times New Roman';

        // Labels 'q' for vertices
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('q', topVertex.x, topVertex.y - 8);

        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('q', rightVertex.x + 8, rightVertex.y);

        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('q', bottomVertex.x, bottomVertex.y + 8);

        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('q', leftVertex.x - 8, leftVertex.y);

        // Label '-Q' for the center
        ctx.font = 'italic 24px Times New Roman';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'top';
        ctx.fillText('-Q', centerPoint.x - 5, centerPoint.y + 2);

        // Labels 'l₀' for semi-diagonals
        ctx.font = 'italic 20px Times New Roman';
        
        // Horizontal semi-diagonals
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('l₀', centerX - l0 / 2, centerY - 5); // Left
        ctx.fillText('l₀', centerX + l0 / 2, centerY - 5); // Right
        
        // Vertical semi-diagonals
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('l₀', centerX - 5, centerY - l0 / 2); // Top
        ctx.fillText('l₀', centerX - 5, centerY + l0 / 2); // Bottom

        // 5. Add the caption "图 1"
        // Using a common Chinese font, with fallback
        ctx.font = '22px "Songti SC", "SimSun", serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('图 1', centerX, canvas.height - 20);

    </script>
</body>
</html>